<template>
	<div>
		<div>
			<el-button @click="addDomain">新增</el-button>
			<div v-for="(item, index) in gradientArr" :key="index" class="base-flex">
				<div class="base-flex item-li">
					<div>梯度{{ index + 1 }}：</div>
					<el-input-number
						v-model="item.min"
						controls-position="right"
						:min="0"
						size="mini"
						@change="change1(index, item.min)"
					></el-input-number>
					<div>0 &lt; 佣金 ≤</div>
					<el-input-number
						v-model="item.max"
						controls-position="right"
						:min="0"
						size="mini"
						@change="change2(index, item.max)"
					></el-input-number>
					<div>元，佣金为总佣金的</div>
					<el-input-number
						v-model="item.rate"
						controls-position="right"
						:min="0"
						size="mini"
						:precision="2"
						:step="0.1"
						@change="change3(index, item.rate)"
					></el-input-number>
					%
				</div>
				<el-button class="del-item" v-if="index != 0" @click="delItem(index)"
					>删除</el-button
				>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			gradientArr: [{ min: 0, max: 1, rate: 85 }]
		};
	},
	props: {
		dataJson: [String]
	},
	mounted() {
		if (this.dataJson) {
			let arr = JSON.parse(this.dataJson);
			this.gradientArr = arr;
		}
	},
	methods: {
		addDomain() {
			this.gradientArr.push({
				min: 0,
				max: 1,
				rate: 85
			});
			let json = JSON.stringify(this.gradientArr);
			this.$emit('submit', json);
		},
		delItem(i) {
			this.gradientArr.splice(i, 1);
			let json = JSON.stringify(this.gradientArr);
			this.$emit('submit', json);
		},
		change1(i, e) {
			this.gradientArr[i].min = e;
			let json = JSON.stringify(this.gradientArr);
			this.$emit('submit', json);
		},
		change2(i, e) {
			this.gradientArr[i].max = e;
			let json = JSON.stringify(this.gradientArr);
			this.$emit('submit', json);
		},
		change3(i, e) {
			this.gradientArr[i].rate = e;
			let json = JSON.stringify(this.gradientArr);
			this.$emit('submit', json);
		}
	}
};
</script>
<style lang="scss" scoped>
.base-flex {
	margin: 8px 0;
	align-items: center;
	.el-input-number--mini {
		margin: 0 10px;
		width: 90px;
		.el-input__inner {
			padding-right: 30px;
		}
	}
	.del-item {
		margin-left: 20px;
	}
}
</style>
